<template>
<!--  <div class="header" :style="{background:'url('+ header_img + ') no-repeat center center'}">-->
  <div class="header" >
    <div class="bg-img">
      <div class="left-box">
        <img :src="leftImg" alt="">
      </div>
      <div class="center-box">
        <img :src="centerImg" alt="">
      </div>
      <div class="right-box">
        <img :src="rightImg" alt="">
      </div>
    </div>
    <div class="tip">专项发展指数 85</div>
    <div class="title">
      <h1>{{cityName ?  '重庆现代建筑产业智慧平台(' + cityName + ')' : '重庆现代建筑产业智慧平台'}}</h1>
    </div>
    <div class="starts" v-if="starts">
      <el-rate  v-model="companyLevel"  :colors="['#2CA6B5','#2CA6B5','#2CA6B5']" disabled></el-rate>
    </div>
  </div>
</template>

<script>
import { queryMarkModel } from '@/api/system/marks'

export default {
  name: "index",
  props: {
    cityName: String,
    starts: Boolean,
  },
  data(){
    return {
      header_img: require("../../assets/images/head_bg.png"),
      companyLevel:3,
      leftImg:require('@/assets/images/左.png'),
      centerImg:require('@/assets/images/中.png'),
      rightImg:require('@/assets/images/右.png'),
    }
  },
  methods: {
    getLevel(){
      queryMarkModel({
        markType: 'companyLevel'
      }).then(res => {
        this.companyLevel = res.data.markValue
      })
    }
  },
}
</script>

<style scoped lang="scss">
.bg-img{
  height: 1.3rem;
  position: absolute;
  top: 0;
  width: 100%;
  img{
    width: 100%;
  }
  .left-box{
    width: 24%;
    position: absolute;
    left: 0;
    img{
      height: 0.8rem;
    }
  }
  .center-box{
    width: 55%;
    position: absolute;
    left: 50%;
    img{
      height: 1rem;
    }
    transform: translateX(-50%);
  }
  .right-box{
    width: 24%;
    position: absolute;
    right: 0;
    img{
      height: 0.8rem;
    }
  }
}
.header {
  display: flex;
  color: #fff;
  position: relative;
  justify-content: space-between;
  height: 1.3rem;
  .tip {
    line-height: .8rem;
    font-size: .37rem;
    text-align: center;
    position: relative;
    z-index: 9999;
    padding-left: .5rem;
  }

  .title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    padding-top: 0.1rem;
    h1{
      font-size: 0.55rem;
    }
    p {
      line-height: normal;
      font-size: .3rem;
    }
  }
  .starts{
    height: 0.5rem;
    font-size: 30px;
    display: flex;
    align-items: center;
    ::v-deep .el-rate__icon{
      font-size: .5rem;
    }

  }

}

</style>
